<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习笔记</title>
    <style>
        * {
            font-size: 20px;
            margin: 0;
        }
    </style>
</head>
<body>
    <div>hover:鼠标悬浮效果</div>
    <div>transition:过度效果</div>
    <div>transition-timing-function:变化时间功能
        <ul>
            <li>linear:线性变化</li>
            <li>ease:慢快慢</li>
            <li>ease-in:以慢速开始</li>
            <li>ease-out:以慢速结束</li>
        </ul>
    </div>
    <div>first-child:首个子代</div>
    <div>nth-*:第n个*</div>
    <div>@keyframe:关键帧</div>
    <div>animation-name:动画名称，由上面代码定义</div>
    <div>animation-duration:动画持续时间</div>
    <div>animation-delay:动画延迟时间</div>
    <div>animation-iteration-count:动画循环
        <ul>
            <li>infinite:无限</li>
        </ul>
    </div>
    <div></div>
    
</body>
</html>